<template>
    <div id="app">
        <Head>我的足迹</Head>
        <div class="tab">
            <div class="btn" :class="params.type=='2'?'service':''" @click="tabdiv('2')"><span>看过的项目</span></div>
            <div class="btn" :class="params.type=='1'?'worker':''" @click="tabdiv('1')"><span>看过的人才</span></div>
        </div>
        <van-list class="prolist"
         v-if="params.type=='2'&&prolist.length>0"
         v-model="loading"
         :finished="finished"
         :finished-text="finished_text"
         @load="onLoad"
         :immediate-check="true" >
            <div class="item" v-for="(item,index) in prolist" :key="index" @click="prodetails(item.subject_id)">
                <div class="title">
                    <div class="namecen">{{item.title}}</div>
                    <img v-if="item.is_top!=0" src="../../assets/freelance/images/resumelist_10.png"/>
                </div>
                <div class="orders">去接单</div>
                <div class="info">
                    <div class="box">
                        <div class="money">￥{{item.price}}</div>
                        <div>预算价格</div>
                    </div>
                    <div class="box day">
                        <div class="day">{{item.period}}</div>
                        <div>预计工期</div>
                    </div>
                    <div class="box">
                        <div class="date">{{item.endtime}}</div>
                        <div>接单截止</div>
                    </div>
                </div>
                <div class="claim">要求：{{item.desc}}</div>
            </div>
        </van-list>
        <van-list class="resumelist"
         v-if="params.type=='1'&&resumelist.length>0"
         v-model="loading"
         :finished="finished"
         :finished-text="finished_text"
         @load="onLoad"
         :immediate-check="true" >
            <div class="item" v-for="(item,index) in resumelist" :key="index" @click="resdetails(item.resume_id)">
                <div class="info clearfix">
                    <div class="sny">
                        <div class="name">
                            <div class="namecen">{{item.name}}</div>
                            <img v-if="item.is_top!=0" src="../../assets/freelance/images/resumelist_10.png"/>
                        </div>
                        <div class="postion">{{item.professional_title}}</div>
                    </div>
                    <img :src="item.avatar_img"/>
                </div>
                <div class="skill">
                    <div class="namelist">
                        <div class="name" v-for="(t,k) in item.skills" :key="k">{{t.custom_name?t.custom_name:t.title}}</div>
                    </div>
                    <div class="gradient"></div>
                    <div class="num">等{{item.skills.length}}个技能</div>
                </div>
                <div class="service">服务：
                    <span class="name" v-for="(t,k) in item.services" :key="k">{{t.title}}、</span>
                </div>
            </div>
        </van-list>
        <Datanull class="null" v-if="params.type=='2'&&prolist.length<=0||params.type=='1'&&resumelist.length<=0"></Datanull>
    </div>
</template>
<script>
import Datanull from '@/components/freelance/datanull'
import http from '@/utils/http'
import api from '@/api'
export default {
  components: {
    Datanull
  },
  data () {
    return {
      loading: false,
      finished: false,
      finished_text: '',
      page: 1,
      pagesize: 15,
      params: {
        type: '2'
      },
      prolist: [],
      resumelist: []
    }
  },
  watch: {
    $route (to, from) {
      // 对路由变化作出响应...
      if (to.name === 'freelancefootprint') {
        // 将地址栏中的url参数初始化到参数对象中
        this.page = 1
        this.fetchData(true)
      }
    }
  },
  created () {
    this.fetchData(true)
  },
  methods: {
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    tabdiv (type) {
      this.params.type = type
      this.fetchData(true)
    },
    prodetails (id) {
      this.$router.push('/freelance/project/' + id)
    },
    resdetails (id) {
      this.$router.push('/freelance/resume/' + id)
    },
    fetchData (init) {
      let conditions = { ...this.params }
      if (init === true) {
        this.page = 1
        this.finished_text = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      http.get(api.history, conditions)
        .then(res => {
          if (this.params.type == '1') {
            if (init === true) {
              this.resumelist = [...res.data.list]
            } else {
              this.resumelist = this.resumelist.concat(res.data.list)
            }
          } else {
            if (init === true) {
              this.prolist = [...res.data.list]
            } else {
              this.prolist = this.prolist.concat(res.data.list)
            }
          }

          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (res.data.list.length < this.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            }
          }
        }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.tab{
    display: flex;
    margin-top: 6px;
    position: relative;
    .btn{
        flex: 1;
        height: 53px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 17px;
        color: #aaaaaa;
        &.service{
            font-weight: bold;
            color: #333e49;
            background-color: #ffffff;
            line-height: 1;
            border-top-left-radius: 20px;
            span{
                border-bottom: 5px solid #fbca3d;
            }
        }
        &.worker{
            font-weight: bold;
            color: #333e49;
            background-color: #ffffff;
            line-height: 1;
            border-top-right-radius: 20px;
            span{
                border-bottom: 5px solid #fbca3d;
            }
        }
    }
}
.prolist,.null{
    height: calc(100vh - 60px - 65px);
    overflow: auto;
    margin-top: 3px;
    .item{
        padding-top: 15px;
        position: relative;
        border-left: 21px solid #ffffff;
        border-right: 21px solid #ffffff;
        border-bottom: 1px solid #ecedf2;
        .title{
            height: 25px;
            display: flex;
            align-items: center;
            position: relative;
            .namecen{
                max-width: calc(100vw - 21px - 68px - 26px);
                font-size: 18px;
                color: #333333;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            img{
                margin-left: 6px;
                width: 15px;
                height: 15px;
            }
        }
        .orders{
            width: 62px;
            height: 25px;
            font-size: 15px;
            color: #232220;
            position: absolute;
            top:15px;
            right: -21px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffdb67;
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
            box-shadow: 0px 1px 7px rgba($color: #ffdb67, $alpha: 0.8);
        }
        .info{
            margin-top: 15px;
            display: flex;
            font-size: 15px;
            color: #bdbdbd;
            .box{
                flex: 1;
                text-align: center;
                line-height: 1;
                &.day{
                    border-left: 1px dashed #d5d5d5;
                    border-right: 1px dashed #d5d5d5;
                }
                .money{
                    font-size: 17px;
                    margin-bottom: 15px;
                    color: #ff4e00;
                }
                .day,.date{
                    color: #555555;
                    margin-bottom: 15px;
                }
            }
        }
        .claim{
            margin-top: 15px;
            margin-bottom: 15px;
            font-size: 15px;
            color: #555555;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    }
}
.resumelist,.null{
    height: calc(100vh - 60px - 65px);
    overflow: auto;
    margin: 3px 21px 0px 21px;
    .item{
        border-bottom: 1px solid #ecedf2;
        padding-top: 15px;
        padding-bottom: 15px;
        .info{
            .sny{
                float: left;
                .name{
                    display: flex;
                    align-items: center;
                    position: relative;
                    .namecen{
                        line-height: 1;
                        max-width: calc(100vw - 42px - 65px - 21px);
                        font-size: 18px;
                        color: #333333;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    img{
                        margin-left: 6px;
                        width: 15px;
                        height: 15px;
                    }
                }
                .postion{
                    line-height: 1;
                    max-width: calc(100vw - 42px - 65px);
                    margin-top: 15px;
                    font-size: 17px;
                    color: #ff4e00;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
            img{
                float: right;
                width: 52px;
                height: 52px;
            }
        }
        .skill{
            margin-top: 15px;
            display: flex;
            align-items: center;
            position: relative;
            .namelist{
                height: 25px;
                max-width: calc(100vw - 42px - 80px);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: flex;
                align-items: center;
                .name:nth-child(odd){
                    font-size: 11px;
                    margin-right: 8px;
                    border-radius: 5px;
                    padding: 3px 6px 3px 6px;
                    border: 1px solid #38c965;
                    background-color: #f6fcf8;
                    color: #38c965;
                }
                .name:nth-child(even){
                    font-size: 11px;
                    margin-right: 8px;
                    border-radius: 5px;
                    padding: 3px 6px 3px 6px;
                    border: 1px solid #4f81f3;
                    background-color: #f0f4fd;
                    color: #4f81f3;
                }
            }
            .gradient{
                position: absolute;
                height: 25px;
                width: 70px;
                right: 80px;
                background-image: linear-gradient(to right, rgba(255, 255, 255,0),rgb(255, 255, 255));
                z-index: 1;
            }
            .num{
                float: left;
                margin-left: 5px;
                font-size: 13px;
                color: #0f2948;
                z-index: 2;
            }
        }
        .service{
            line-height: 1;
            margin-top: 15px;
            font-size: 15px;
            color: #555555;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}
.prolist::-webkit-scrollbar,.resumelist::-webkit-scrollbar{
    display: none;
}
</style>
